<template>
  <view class="_list">
    <view class='_list-item'>
      <view class="tag"></view>
      <view class="main">
        <view class="left">
          <view class="title"></view>
          <view class="desc"></view>
          <view class="desc"></view>
        </view>
        <view class="right">
          <view class="price"></view>
          <view class="unit"></view>
        </view>
      </view>
      <view class="footer">
        <view class="btn"></view>
        <view class="btn"></view>
      </view>
    </view>
    <view class='_list-item'>
      <view class="tag"></view>
      <view class="main">
        <view class="left">
          <view class="title"></view>
          <view class="desc"></view>
          <view class="desc"></view>
        </view>
        <view class="right">
          <view class="price"></view>
          <view class="unit"></view>
        </view>
      </view>
      <view class="footer">
        <view class="btn"></view>
        <view class="btn"></view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
 ._list {
  ._list-item {
    width: 690upx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24upx;
    border-radius: 23upx;
    background: #fff;
    box-sizing: border-box;
    .tag {
      border-radius: 23rpx 0px;
      width: 80upx;
      height: 32upx;
      background-color: #f5f5f5;
    }
    .main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30upx;
      box-sizing: border-box;
      width: 100%;
      .left {
        flex: 1;
        display: flex; 
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-right: 30upx;
        .title {
          width: 100%;
          height: 48upx;
          background: #f5f5f5;
          margin-bottom: 20upx;
          border-radius: 6upx;
        }
        .desc {
          width: 100%;
          height: 32upx;
          background: #f5f5f5;
          margin-top: 10upx;
          border-radius: 6upx;
        }
      }
      .right {
        width: 180upx;;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        .price {
          width: 180upx;
          height: 48upx;
          background: #f5f5f5;
          border-radius: 6upx;
        }
        .unit {
          margin-top: 10upx;
          height: 32upx;
          width: 180upx;
          background: #f5f5f5;
          border-radius: 6upx;
        }
      }
    }
    .footer {
      padding: 10upx 30upx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .btn {
        width: 150upx;
        height: 48upx;
        border-radius: 10upx;
        background-color: #f5f5f5;
        margin-right: 20upx;
      }
    }
  }
 } 
</style>